<template>
  <section>
    <search-box>
      <div>
        <div class="m-b-10">
          <div class="search-box">
            客户ID:
            <div class="search-input">
              <el-input v-model="customer_id" placeholder="请输入客户ID"></el-input><span class="require-icon">*</span>
            </div>
          </div>
        </div>
        <div class="flex-row">
          <div class="search-input">
            <el-select v-model="search_item">
              <el-option v-for="(value, key) in search_list" :key="key" :value="key" :label="value.label"></el-option>
            </el-select>
          </div>
          <div class="search-input">
            <el-input v-model="search_list[search_item].value" v-if="!search_list[search_item].list"></el-input>
            <el-select v-model="search_list[search_item].value" v-else>
              <el-option v-for="item in search_list[search_item].list" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </div>
          <div class="search-input m-left20">
            <el-button type="primary" @click="FnGetList(1)">查询</el-button>
          </div>
        </div>
      </div>
    </search-box>

    <el-table :data="list" border stripe>
      <el-table-column prop="id" label="dpvs id" min-width="130"></el-table-column>
      <el-table-column prop="name" label="dpvs名称" min-width="130"></el-table-column>
      <el-table-column prop="status" label="dpvs状态" min-width="130"></el-table-column>
      <el-table-column prop="app_name" label="vdc名称" min-width="130"></el-table-column>
      <el-table-column prop="type_name" label="dpvs类型" min-width="130"></el-table-column>
      <el-table-column prop="area" label="区域" min-width="100"></el-table-column>
      <el-table-column prop="site_name" label="可用区名称" min-width="100"></el-table-column>
      <el-table-column prop="site_id" label="可用区id" min-width="130"></el-table-column>
      <el-table-column prop="network_info" label="绑定网络信息" width="200">
        <template #default="scope">
          <copy :str="JSON.stringify(scope.row.network_info)"></copy>
          <div class="pre-code-box"><pre>{{scope.row.network_info}}</pre></div>
        </template>
      </el-table-column>
      <el-table-column prop="customer_id" label="用户customerid" min-width="130"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" min-width="130"></el-table-column>
      <el-table-column prop="update_time" label="更新时间" min-width="130"></el-table-column>
      <el-table-column label="操作" width="130">
        <template #default="scope">
          <el-button 
            type="text" 
            style="padding-left: 0;padding-right:0;" 
            @click="$router.push({name: 'dpvs_vm', query: {id: scope.row.id}})">查看dvps_vm</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page="page_index"
              :page-size="page_size"
              layout="total, prev, pager, next"
              :total="total">
      </el-pagination>
    </div>
  </section>
</template>

<script>
import searchBox from '../../components/search-box.vue'
import copy from '../../components/copy.vue'
import Service from '@/service/dvps'
export default {
  components: { searchBox, copy },
  data() {
    return {
      search_item: "private_ip",
      customer_id: 'E890861',
      search_list: {
        // customer_id: {label: "客户ID", value: ""},
        private_ip: {label: "nat对应的私网ip", value: ""},
        dpvs_id: {label: "dpvs集群id", value: ""},
      },
      list: [],
      page_index: 1,
      page_size: 10,
      total: 0
    }
  },
  methods: {
    FnGetList(page) {
      if(!this.customer_id) {
        this.$message.warning('请输入客户ID')
        return
      } 
      if(page) this.page_index = page
      let reqData = {
        page_index: this.page_index,
        page_size: this.page_size,
        customer_id: this.customer_id
      }
      if(this.search_list[this.search_item].value) reqData[this.search_item] = this.search_list[this.search_item].value
      Service.get_dvps_list(reqData).then(resData => {
        if(resData.code == "Success") {
          this.list = resData.data.dpvs_list
          this.total = resData.data.dpvs_count
        }
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.FnGetList()
    },
  },
  created() {
    if(this.$route.query.id) {
      this.customer_id = this.$route.query.id
    }
    this.FnGetList()
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  align-items: center;
}
.m-left20 {
  margin-left: 40px;
}
.page-box {
  margin-top: 10px;
  text-align: right;
}
.search-input {
  width: 220px;
  margin-right: 20px;
  position: relative;
  .require-icon {
    position: absolute;
    right: 8px;
    top: 6px;
    color: #DA3B18;
    font-size: 20px;
  }
}
</style>